<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<span id="app">这个会改变: {{msg}}<br/></span>
<span id="app-2" v-once>这个不会改变: {{msg}}<br/></span>
<p id="app-3">Using mustaches:{{rawHtml}}</p>
<p id="app-4">Using v-html directive:<span v-html="rawHtml"></span></p>
<div id="app-5" v-bind:id="dynamicId"></div>
<button id="app-6" v-bind:disabled="isButtonDisabled">Button</button>
<p id="app-7">{{number + 1}}</p>
<p id="app-8">{{ok ? 'YES':'NO'}}</p>
<p id="app-9">{{message.split('').reverse().join('')}}</p>
<a id='app-10' v-bind:href="url">...</a><br/>
<!--暂不支持11和12-->
<a id="app-11" v-bind:[attributeName]="url">...</a><br/>
<a id="app-12" v-on:[eventName]="doSomething">....</a><br/>
<form v-on:submit.prevent="onSubmit">...</form>
<script>
    function doSomething() {
        window.alert('doSomething');
    }
    var app12 = new Vue({
        el:'#app-12',
        data:{
            eventName: 'click'
        }
    });
    var app11 = new Vue({
        el: '#app-11',
        data: {
            attributeName: 'href',
            url: 'http://www.baidu.com'
        }
    });
    var app10 = new Vue({
        el: '#app-10',
        data: {
            url: 'http://www.baidu.com'
        }
    });
    var app9 = new Vue({
        el: '#app-9',
        data: {
            message: 'message'
        }
    });
    var app8 = new Vue({
        el: '#app-8',
        data: {
            ok: false
        }
    });
    var app7 = new Vue({
        el: '#app-7',
        data: {
            number: 3
        }
    });
    var app6 = new Vue({
        el: 'app-6',
        data: {
            isButtonDisabled: false
        }
    });
    var app5 = new Vue({
        el: 'app-5',
        data: {
            dynamicId: 'wusd'
        }
    });
    var app4 = new Vue({
        el: '#app-4',
        data: {
            rawHtml: '<span style="color:red">This should be red</span>'
        }
    });
    var app3 = new Vue({
        el: '#app-3',
        data: {
            rawHtml: '<span style="color:red">This should be red</span>'
        }
    });
    var app2 = new Vue({
        el: '#app-2',
        data: {
            msg: 'app2会改变吗?'
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            msg: '我是msg,会改变'
        }
    });
</script>
</body>
</html>